<template>
  <div id="app">
    <tao-table :data="bookList">
      <template v-slot:default="{row}">
        <tao-tab v-model="row.tag"></tao-tab>
      </template>
    </tao-table>
  </div>
</template>
<script>
import TaoTable from "@/components/tao-table.vue";
import TaoTab from "@/components/tao-tab.vue";

export default {
  name: "App",
  components: {TaoTab, TaoTable},
  data() {
    return {
      bookList: [
        {id: 1, type: "书籍", name: "ES6标准入门", tag: "前端"},
        {id: 2, type: "书籍", name: "Vue.js设计与入门", tag: "前端"},
        {id: 3, type: "书籍", name: "JavaScript高级程序设计", tag: "前端"},]
    }
  },
  watch:{
    bookList:{
      immediate:true,
      deep:true,
      handler(bookList){
        localStorage.setItem("bookList",JSON.stringify(bookList))
      }
    }
  }
}
</script>
<style lang="less">

</style>
